<template>
  <div
    v-ui-ref="vSetRef"
    class="relative flex flex-col w-full"
    :style="{
      backgroundColor: `${info.extension.bgColor && info.extension.bgColor.value}`,
      height: info.extension.isPxBox?.value ? `${info.extension.pxBoxHeight?.value}px` : `${info.extension.boxHeight?.value}vh`,
      '--arrowColor': info.extension.arrowColor?.value,
      '--fontSize': info.extension.fontSize?.value + 'px',
    }"
  >
    <div class="chart_input">
      <input placeholder="请输入搜索内容" type="text" @input="search" />
    </div>
    <TreeItem
      :current-value="currentValue"
      :list="list"
      :props="{
        label: info.extension.lableProps?.value,
        child: info.extension.childProps?.value,
        value: info.extension.valueProps?.value,
        type: info.extension.typeProps?.value,
        typeValue: info.extension.valuetypeProps?.value,
      }"
      :status-list="info.extension.statusList?.value"
      :status-props="info.extension.statusProps?.value"
      :style-obj="{
        marginLeft: `${info.extension.space?.value}px`,
        height: `${info.extension.lineHeight?.value}px`,
        color: info.extension.fontColor?.value,
        selectBgColor: info.extension.selectBgColor?.value,
        fontSize: info.extension.fontSize?.value,
      }"
      @chooseTree="chooseTree"
    />
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin } from '@ve/mixin'
  import { cloneDeep } from 'lodash'
  import TreeItem from './components/treeItem.vue'
  export default defineComponent({
    name: 'UiTree3D',
    components: {
      TreeItem,
    },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        inter: null,
        list: [],
        infoComponent: {},
        props: {
          label: this.info.extension.lableProps?.value,
          child: this.info.extension.childProps?.value,
          value: this.info.extension.valueProps?.value,
        },
        allList: [
          {
            name: '织造段',
            value: 1,
            open: true,
            type: 'p',
            children: [
              { value: 1, type: 'p', name: '经编机1' },
              { value: 2, type: 'p', name: '经编机2' },
              { value: 3, type: 'p', name: '经编机3' },
              { value: 4, type: 'p', name: '经编机4' },
            ],
          },
          {
            name: '成品段',
            value: 3,
            children: [
              { value: 1, name: '烫光机1' },
              { value: 2, name: '烫光机2' },
              { value: 3, name: '烫光机3' },
              { value: 4, name: '烫光机4' },
            ],
          },
          {
            value: 2,
            name: '染整段',
            children: [
              {
                value: 1,
                name: '高刷',
                children: [
                  {
                    value: 1,
                    name: '高刷1',
                  },
                  {
                    value: 2,
                    name: '高刷2',
                  },
                  {
                    value: 3,
                    name: '高刷3',
                  },
                ],
              },
              {
                value: 1,
                name: '棍刷',
                children: [
                  {
                    value: 1,
                    name: '棍刷1',
                  },
                  {
                    value: 2,
                    name: '刷2',
                  },
                ],
              },
            ],
          },
          {
            value: 1,
            name: '动环段',
            children: [
              { value: 1, name: '动力设备1' },
              { value: 1, name: '动力设备2' },
            ],
          },
        ],
        currentValue: '',
      }
    },
    watch: {
      info: {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
          })
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
      // this.list = cloneDeep(this.allList)
    },
    mounted() {
      this.$nextTick(() => {
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      chooseTree(e, item) {
        console.log(item, e)
        if (
          (!item[this.props['child']] || !item[this.props['child']].lenth) &&
          item[this.info.extension.isChild?.value] == this.info.extension.isChildvalue?.value
        ) {
          item[this.props['child']] = ['1111']
        }
        item[this.props['child']] = [{ name: '测试数据1', value: 2 }]
        this.currentValue = e
        this.getInfo.data = { formData: e }
        this.onClick()
      },
      getRequestData() {
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          console.log(res, '-----------')
          this.allList = res
          this.list = cloneDeep(this.allList)
        })
      },
      search(e) {
        // console.log(e.target.value)
        // this.list
        let arr = []
        cloneDeep(this.allList).map((item) => {
          this.getList(item, arr, e.target.value, () => {
            arr = cloneDeep(arr.filter((qq) => qq[this.props['label']] != item[this.props['label']]))
          })
        })
        this.list = cloneDeep(arr)
      },
      getList(obj, arr, str, cb) {
        let brr = []
        if (obj[this.props['child']] && obj[this.props['child']].length && obj[this.props['label']].indexOf(str) > -1) {
          obj[this.props['child']].map((cur) => {
            this.getList(cur, brr, str, () => {
              obj[this.props['child']] = cloneDeep(obj[this.props['child']].filter((qq) => qq[this.props['label']] != cur[this.props['label']]))
            })
          })
        } else if (obj[this.props['child']] && obj[this.props['child']].length && obj[this.props['label']].indexOf(str) == -1) {
          obj[this.props['child']].map((cur) => {
            this.getList(cur, arr, str, () => {
              obj[this.props['child']] = cloneDeep(obj[this.props['child']].filter((qq) => qq[this.props['label']] != cur[this.props['label']]))
              console.log(obj)
            })
          })
        }
        if (obj[this.props['label']].indexOf(str) > -1) {
          arr.push(obj)
        } else if (obj[this.props['label']].indexOf(str) == -1) {
          cb()
        }
      },
    },
  })
</script>
<style lang="scss">
  .uiTree3D {
    width: 100%;
    .chart_input {
      width: 100%;
      height: 40px;
      border: 2px solid #0047ad;
      display: flex;
      justify-content: center;
      margin: 0 0 10px;
      border-radius: 5px;
      input {
        width: 90%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0);
        font-size: 18px;
        color: #fff;
      }
    }
  }
</style>
